<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        .title {
            font-size: 30px;
            font-weight: bold;
            margin: 20px 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .date {
            font-size: 20px;
            color: #4e4a479e;
            margin-bottom: 20px;
            display: flex;
            justify-content: end;
            align-items: center;
        }.desc {
            font-size: 16px;
            line-height: 1.6;
        }
        .desc p {
            margin-bottom: 20px;
            text-indent: 2em;
        }
        
    </style>
</head>
<body>
    <!-- 这是正文页 -->
    <div class="nav">
        <img src="../img/logo.png" alt="">
        <span>我的博客系统</span>
        <span class="space"></span>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="https://baidu.com">注销</a>
    </div>
    <div class="container">
        <div class="container-left">
            <div class="card">
                <img src="../img/tx.png" alt="">
                <h3>zhiang</h3>
                <a href="https://gitee.com/jiang-zhiang">Gitee 地址</a>
                <div class="counter">
                    <span>博客数</span>
                    <span>访问量</span>
                </div>
                <div class="counter">
                    <span>0</span>
                    <span>0</span>
                </div>
            </div>
        </div>
        <div class="container-right">
            <div class="title">
                标题
            </div>
            <div class="date">
                2023-10-01 12:00:00
            </div>
            <div class="desc">
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ex odit ab, accusantium nam laudantium eum quo delectus expedita quaerat fuga! Aspernatur repellendus minus est illum qui debitis modi laboriosam!
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ex odit ab, accusantium nam laudantium eum quo delectus expedita quaerat fuga! Aspernatur repellendus minus est illum qui debitis modi laboriosam!
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ex odit ab, accusantium nam laudantium eum quo delectus expedita quaerat fuga! Aspernatur repellendus minus est illum qui debitis modi laboriosam!
                </p>
                <p>
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio necessitatibus similique eum veritatis, temporibus labore perspiciatis inventore quae exercitationem molestiae consectetur architecto enim quod corrupti magnam, facere aperiam suscipit ullam!
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio necessitatibus similique eum veritatis, temporibus labore perspiciatis inventore quae exercitationem molestiae consectetur architecto enim quod corrupti magnam, facere aperiam suscipit ullam!
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio necessitatibus similique eum veritatis, temporibus labore perspiciatis inventore quae exercitationem molestiae consectetur architecto enim quod corrupti magnam, facere aperiam suscipit ullam!
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ex odit ab, accusantium nam laudantium eum quo delectus expedita quaerat fuga! Aspernatur repellendus minus est illum qui debitis modi laboriosam!
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ex odit ab, accusantium nam laudantium eum quo delectus expedita quaerat fuga! Aspernatur repellendus minus est illum qui debitis modi laboriosam!
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ex odit ab, accusantium nam laudantium eum quo delectus expedita quaerat fuga! Aspernatur repellendus minus est illum qui debitis modi laboriosam!
                </p>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ex odit ab, accusantium nam laudantium eum quo delectus expedita quaerat fuga! Aspernatur repellendus minus est illum qui debitis modi laboriosam!
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ex odit ab, accusantium nam laudantium eum quo delectus expedita quaerat fuga! Aspernatur repellendus minus est illum qui debitis modi laboriosam!
                </p>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ex odit ab, accusantium nam laudantium eum quo delectus expedita quaerat fuga! Aspernatur repellendus minus est illum qui debitis modi laboriosam!
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ex odit ab, accusantium nam laudantium eum quo delectus expedita quaerat fuga! Aspernatur repellendus minus est illum qui debitis modi laboriosam!
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ex odit ab, accusantium nam laudantium eum quo delectus expedita quaerat fuga! Aspernatur repellendus minus est illum qui debitis modi laboriosam!            
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ex odit ab, accusantium nam laudantium eum quo delectus expedita quaerat fuga! Aspernatur repellendus minus est illum qui debitis modi laboriosam!
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ex odit ab, accusantium nam laudantium eum quo delectus expedita quaerat fuga! Aspernatur repellendus minus est illum qui debitis modi laboriosam!
                </p>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ex odit ab, accusantium nam laudantium eum quo delectus expedita quaerat fuga! Aspernatur repellendus minus est illum qui debitis modi laboriosam!
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ex odit ab, accusantium nam laudantium eum quo delectus expedita quaerat fuga! Aspernatur repellendus minus est illum qui debitis modi laboriosam!
                </p>
            </div>
        </div>     
    </div>
</body>
</html>